<template>
  <div class="app-page">
    <table-search
      ref="tableSearch"
      label-width="80px"
      :search-form="searchFormItem"
      :on-submit="handleQuery"
      :on-reset="handleQuery"
    />
    <el-card>
      <div class="content">
        <div class="app-table-action-wrap">
          <auth-button
            auth-key="d_3_1"
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleAdd"
          >
            新增
          </auth-button>
        <!-- <el-button
          size="small"
          @click="handleExport"
        >
          导出
        </el-button> -->
        </div>

        <table-paging
          :table-list="tableList"
          :table-column="tableColumn"
          :table-paging="tablePaging"
          :table-total="tableTotal"
          :table-btn-width="140"
          @pagingChange="handlePaginChange"
        />
      </div>

      <car-update
        ref="update"
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        @handleModalSubmit="handleModalSubmit"
      />
    </el-card>
  </div>
</template>

<script>
import { fetchCarFindPage, fetchCarGet, fetchCarAdd, fetchCarUpdate, fetchCarDelete, fetchCarStatusUpdate, fetchCarExport } from '@/api/basicinfo/basicdata/car'
import { fetchDropDeptAllList, fetchDropAccountAllList } from '@/api/common/commonDropDown'
import { TableSearch, TablePaging, AuthButton } from '@/components'
import { searchFormItem, tableColumn } from './config'
import CarUpdate from './update'
import { mapGetters } from 'vuex'

export default {
  name: 'Car',
  components: { TableSearch, TablePaging, CarUpdate, AuthButton },
  data() {
    return {
      searchFormItem: [],
      searchFormData: {},

      tableList: [],
      tableColumn: tableColumn(this.handleEdit, this.handleStart, this.handleDelete),
      tableTotal: 0,
      tablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogTitle: '新增',
      dialogVisible: false
    }
  },
  computed: {
    ...mapGetters(['userOrgId'])
  },
  created() {
    this._createSearchFormItem()
    this.postFindPage()
  },
  methods: {
    handleQuery(values) { // 查询点击
      values.accountId = values.accountList && values.accountList.length ? values.accountList[1] : 0
      this.searchFormData = values
      this.tablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handleAdd() { // 添加
      this._setModalData()
      this.dialogVisible = true
    },

    handleEdit(id) { // 修改
      this.postGet(id)
    },

    handleStart(id, status) { // 开启
      this.postStatusUpdate(id, status)
    },

    handleDelete(id) { // 删除
      this.postDelete(id)
    },

    handleModalSubmit(values) { // 弹窗提交
      if (values.id) {
        this.postUpdate(values)
        return false
      }
      this.postAdd(values)
    },

    hanleClose() { // 弹窗关闭
      this.dialogVisible = false
    },

    handleExport() { // 导出
      fetchCarExport({ ...this.$refs.tableSearch.formValue })
    },

    handlePaginChange(pageInfo) { // 分页改变
      this.tablePaging = pageInfo
      this.postFindPage()
    },

    _createSearchFormItem() { // 创建 formItem
      this.searchFormItem = searchFormItem(this._createCascaderConfig())
    },

    _createCascaderConfig(multiple = false) { // 创建级联配置
      return {
        lazy: true,
        multiple,
        lazyLoad: (node, resolve) => {
          const { level, value } = node
          if (level === 0) {
            this.postDeptAllList().then(res => {
              resolve(res)
            })
          } else {
            this.postAccountAllList(value).then(res => {
              resolve(res)
            })
          }
        }
      }
    },

    _setModalData(title = '新增', visible = true, modalFormData = { orgId: this.userOrgId }) { // 设置弹窗
      this.dialogTitle = title
      this.dialogVisible = visible
      this.$refs.update.modalFormData = this._formatData(modalFormData)
    },

    _formatData(data) { // 格式化数据
      const { carStaffList } = data
      data.deviceIdList = data.deviceIdStr ? data.deviceIdStr.split(',') : []
      data.accountIdList = []
      carStaffList && carStaffList.length && carStaffList.map(item => {
        data.accountIdList.push([item.deptId, item.accountId])
      })
      return data
    },

    postFindPage() { // 查询数据
      fetchCarFindPage({ ...this.searchFormData, ...this.tablePaging })
        .then((res) => {
          const { records, current, size, total } = res
          this.tableList = records
          this.tablePaging = {
            page: current,
            pagesize: size
          }
          this.tableTotal = total
        })
    },

    postAdd(values) { // 添加
      fetchCarAdd(values).then(res => {
        this.dialogVisible = false
        this.$message.success('新增成功')
        this.postFindPage()
      })
    },

    postGet(id) { // 获取详情
      fetchCarGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    postDelete(id) { // 删除
      fetchCarDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.postFindPage()
      })
    },

    postUpdate(values) { // 更新
      fetchCarUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.postFindPage()
      })
    },

    postStatusUpdate(id, status) { // 开启
      fetchCarStatusUpdate({ id, status }).then(() => {
        this.$message.success('修改成功')
        this.postFindPage()
      })
    },

    postDeptAllList() { // 部门下拉
      return fetchDropDeptAllList().then(res => {
        return res.map(e => ({ label: e.name, value: e.id }))
      })
    },
    postAccountAllList(deptId) { // 人员下拉
      return fetchDropAccountAllList(deptId).then(res => {
        return res.map(e => ({ label: e.name, value: e.id, leaf: true }))
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
